<template>
    <div class="add_coupon">
        <el-form ref="form" :model="newForm" label-width="auto">
            <el-form-item label="优惠券类型：">
                <el-select v-model="newForm.type" placeholder="全场赠券">
                    <el-option label="全场赠券" :value="0" />
                    <el-option label="会员赠券" :value="1" />
                    <el-option label="购物赠券" :value="2" />
                    <el-option label="注册赠券" :value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="优惠券名称：">
                <el-input v-model="newForm.name" />
            </el-form-item>
            <el-form-item label="适用平台:">
                <el-select v-model="newForm.platform" placeholder="全平台">
                    <el-option label="全平台" :value="0" />
                    <el-option label="移动平台" :value="1" />
                    <el-option label="PC平台" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="发行总量：">
                <el-input v-model="newForm.publishCount" placeholder="只能输入正整数" />
            </el-form-item>
            <el-form-item label="面额：">
                <el-input v-model="newForm.amount" placeholder="面额只能是数值，限2位小数">
                    <template #append>元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="每人限领：">
                <el-input v-model="newForm.perLimit" placeholder="只能输入正整数">
                    <template #append>张</template>
                </el-input>
            </el-form-item>
            <el-form-item label="使用门槛：">
                <el-input v-model="newForm.minPoint" placeholder="只能输入正整数">
                    <template #prepend>满</template>
                    <template #append>元可用</template>
                </el-input>
            </el-form-item>
            <el-form-item label="领取日期:">
                <el-date-picker v-model="newForm.enableTime" type="date" label="选择日期" placeholder="选择日期"
                    style="width: 100%" />
            </el-form-item>
            <el-form-item label="有效期:">
                <el-col :span="10">
                    <el-date-picker v-model="newForm.startTime" type="date" label="选择日期" placeholder="选择日期"
                        style="width: 100%" />
                </el-col>
                <el-col class="text-center" :span="1" style="margin: 0 0.5rem">至</el-col>
                <el-col :span="10">
                    <el-date-picker v-model="newForm.endTime" type="date" label="选择日期" placeholder="选择日期"
                        style="width: 100%" />
                </el-col>
            </el-form-item>
            <el-form-item label="可使用商品:">
                <el-radio-group v-model="newForm.useType" label="size control">
                    <el-radio-button label="0">全场通用</el-radio-button>
                    <el-radio-button label="1">指定分类</el-radio-button>
                    <el-radio-button label="2">指定商品</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注：">
                <el-input type="textarea" v-model="newForm.note" placeholder="请输入内容" :rows="4" />
            </el-form-item>
            <el-form-item label=" ">
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive } from 'vue'
import { ApiUpdateCoupon, ApiGetCouponId } from '@/http/api'
//@ts-ignore
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter();
const route = useRoute()
const initForm = {
    amount: 0,
    code: '',
    count: 0,
    enableTime: '',
    endTime: '',
    id: 0,
    memberLevel: 0,
    minPoint: 0,
    name: '',
    note: '',
    perLimit: 0,
    platform: 0,
    productCategoryRelationList: [
        {
            couponId: 0,
            id: 0,
            parentCategoryName: '',
            productCategoryId: 0,
            productCategoryName: ''
        }
    ],
    productRelationList: [
        {
            couponId: 0,
            id: 0,
            productId: 0,
            productName: '',
            productSn: ''
        }
    ],
    publishCount: 1,
    receiveCount: 0,
    startTime: '',
    type: 0,
    useCount: 0,
    useType: 0
}
const newForm = reactive({
    ...initForm
})
// 获取单条数据信息
ApiGetCouponId(route.query.id).then(res => {
    if (res.code === 200) {
        Object.assign(newForm, JSON.parse(JSON.stringify(res.data)))
        console.log(res.data);

    }
})
// 提交按钮
// const onSubmit = () => {
//     console.log("onSubmit");
//     ApiUpdateCoupon(initform).then(res => {
//         if (res.code === 200) {
//             // 提示用户
//             ElMessage({
//                 type: 'success',
//                 message: '修改成功'
//             })
//             // 成功后，跳转回到优惠券页面
//             router.push('/sms/coupon')
//         }
//     })
// }
const onSubmit = () => {
    ElMessageBox.confirm("是否确认修改数据？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        ApiUpdateCoupon(initform).then(res => {
            if (res.code === 200) {
                // 提示
                ElMessage({
                    type: 'success',
                    message: '修改成功'
                })
                // 成功后，跳转回到优惠券页面
                router.push('/sms/coupon')
            }
        })
    }).catch(() => { })
}


</script>
  
<style lang="less" scoped>
.el-radio-group {
    margin-right: 12px;
}

.add_coupon {
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 60px 230px 60px 120px;
    margin: 40px 230px;
}
</style>